<template>
    <div>
        <el-page-header content="编辑文档" @back="handleBack()" title="文档管理" />
        <el-form ref="newsFormRef" :model="newsForm" :rules="newsFormRules" label-width="80px" class="demo-ruleForm"
            status-icon>
            <!-- 标题 -->
            <el-form-item label="文档名称" prop="title">
                <el-input v-model="newsForm.title" />
            </el-form-item>
            <!-- 内容 -->
            <el-form-item label="文档介绍" prop="content">
                <!-- 使用editor组件 -->
                <editor @event="handleChange" :content="newsForm.content" v-if="newsForm.content"/>
            </el-form-item>
            <!-- 类别 -->
            <el-form-item label="文档类型" prop="category">
                <el-select v-model="newsForm.category" class="m-2" placeholder="Select" style="width:100%;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <!-- 封面图片 -->
            <el-form-item label="文档封面" prop="cover">
                <Upload :avatar="newsForm.cover" @kerwinchange="handleUploadChange" />
            </el-form-item>
            <!-- 添加新闻 -->
            <el-form-item>
                <el-button type="primary" @click="submitForm()">更新文档</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
// 引入editor组件
import editor from "@/components/editor/Editor"
// 引入upload组件
import Upload from '@/components/upload/Upload'
import upload from '@/util/upload';
// import router from '@/router';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const router = useRouter()
const route = useRoute()
const newsFormRef = ref()
const newsForm = reactive({
    title: "",
    content: "",
    category: 1,  //1:A级文档 2：B级文档 3：C级文档
    cover: "",
    file: null,
    isPublish: 0  //0:未发布  1：已发布
})

// 规则
const newsFormRules = reactive({
    title: [
        { required: true, message: "请输入文档名称", trigger: "blur" }
    ],
    content: [
        { required: true, message: "请输入文档内容", trigger: "blur" }
    ],
    category: [
        { required: true, message: "请选择文档分类", trigger: "blur" }
    ],
    cover: [
        { required: true, message: "请上传文档图片", trigger: "blur" }
    ]
})

// 每次editor内容改变的回调
const handleChange = (data) => {
    // console.log(data)
    newsForm.content = data
}

// 新闻类别
const options = [
    {
        label: "A级文档",
        value: 1,
    },
    {
        label: "B级文档",
        value: 2,
    },
    {
        label: "C级文档",
        value: 3,
    },
]

const handleUploadChange = (file) => {
    newsForm.cover = URL.createObjectURL(file);
    newsForm.file = file
}

// 提交校验
const submitForm = () => {
    newsFormRef.value.validate(async (valid) => {
        if (valid) {
            try {
                // 后台通讯
                await upload("/adminapi/documentation/list", newsForm)
                ElMessage.success("更新文档成功")
                router.back()
            } catch (error) {
                console.error("更新文档失败:", error)
                ElMessage.error("更新文档失败，请稍后重试")
            }
        }
    })
}

// 点击返回
const handleBack = () => {
    router.back()
}

// 取当前页面数据
onMounted(async () => {
    try {
        const res = await axios.get(`/adminapi/documentation/list/${route.params.id}`)
        
        if (res.data.ActionType === "ok" && res.data.data.length > 0) {
            // 绑定初始值
            Object.assign(newsForm, res.data.data[0])
        } else {
            ElMessage.error("获取文档信息失败")
            router.back()
        }
    } catch (error) {
        console.error("获取文档信息失败:", error)
        ElMessage.error("获取文档信息失败")
        router.back()
    }
})
</script>

<!-- 样式 -->
<style lang="scss" scoped>
.el-form {
    margin-top: 50px;
}
</style>